<template>
  <view class="container">
    <block>
      <!-- 封面图 -->
      <view
        class="userinfo"
        v-if="LoginUser.cover_cdn"
        :style="{ background: 'url(' + LoginUser.cover_cdn + ')' }"
      >
        <!-- 在微信平台出现 -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- 头像 -->
        <view class="userinfo-avatar">
          <open-data type="userAvatarUrl"></open-data>
        </view>

        <!-- 昵称 -->
        <view class="nickname-carid">
          <view v-if="LoginUser.nickname" class="userinfo-nickname">
            {{ LoginUser.nickname }}
          </view>
          <open-data
            v-else
            class="userinfo-nickname"
            type="userNickName"
          ></open-data>
        </view>

        <view class="userinfo-carid" v-if="!LoginUser">
          <u-button type="success" @click="AuthLogin">授权登录</u-button>
        </view>
        <!-- #endif -->

        <!-- 在H5 || app => 应用软件 -->
        <!-- #ifdef H5 || APP-PLUS -->
        <view class="avatar">
          <u-image
            width="100%"
            height="100px"
            src="/static/images/logo.png"
          ></u-image>
        </view>

        <view class="nickname-carid">
          <text class="userinfo-nickname" v-if="LoginUser.nickname">
            {{ LoginUser.nickname }}
          </text>
          <text class="userinfo-nickname" v-else>临时用户</text>
        </view>

        <view class="userinfo-carid" v-if="!LoginUser">
          <u-button type="success" shape="circle">用户登录</u-button>
        </view>
        <!-- #endif -->
      </view>

      <!-- 没有封面图 -->
      <view v-else class="userinfo">
        <!-- #ifdef MP-WEIXIN -->
        <!-- 头像 -->
        <view class="avatar">
          <open-data type="userAvatarUrl"></open-data>
        </view>

        <!-- 昵称 -->
        <view class="nickname-carid">
          <view class="userinfo-nickname" v-if="LoginUser.nickname">
            {{ LoginUser.nickname }}
          </view>
          <open-data v-else class="userinfo-nickname" type="userNickName">
          </open-data>
        </view>

        <view class="userinfo-carid" v-if="!LoginUser">
          <u-button type="success" @click="AuthLogin">授权登录</u-button>
        </view>
        <!-- #endif -->

        <!-- #ifdef H5 || APP-PLUS -->
        <view class="avatar">
          <u-image width="100%" height="200px" src="/static/images/logo.png">
          </u-image>
        </view>

        <view class="nickname-carid">
          <text class="userinfo-nickname" v-if="LoginUser.nickname">
            {{ LoginUser.nickname }}
          </text>
          <text class="userinfo-nickname">临时用户</text>
        </view>

        <view class="userinfo-carid" v-if="!LoginUser">
          <u-button type="success" shape="circle">用户登录</u-button>
        </view>
        <!-- #endif -->
      </view>

      <view class="usermotto">
        <view class="profile-items" @click="profile">
          <text>修改信息</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
        <view class="profile-items" @click="order">
          <text>我的预约</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
        <view class="profile-items" @click="address">
          <text>我的收货地址</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
        <view class="profile-items">
          <text>维修进度</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
        <view class="profile-items" @click="record">
          <text>消费记录</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
        <view class="profile-items" @click="show = true">
          <!--<image src='/static/images/icons/call.png'></image>-->
          <text>联系我们</text>
          <image src="/static/images/icons/row.png"></image>
        </view>
      </view>
    </block>
    <!-- 消息提示框 -->
    <u-notify ref="uNotify"></u-notify>
    <!-- 模态框 -->
    <u-modal
      :show="show"
      @confirm="call"
      @cancel="cancel"
      :title="title"
      :content="content"
      showCancelButton
    ></u-modal>
  </view>
</template>
<script>
export default {
  onShow() {
    // console.log(this);
    // 获取本地存储的信息
    let LoginUser = uni.getStorageSync('LoginUser') ? uni.getStorageSync('LoginUser') : null

    this.LoginUser = LoginUser
  },
  data() {
    return {
      LoginUser: null,
      show: false,
      title: '拨打电话',
      content: '是否联系客服'
    }
  },
  methods: {
    AuthLogin() {
      // console.log(22222);
      uni.login({
        provider: 'weixin',
        success: async (loginRes) => {
          //获取code
          let code = loginRes.code
          //   console.log(loginRes)
          if (!code) {
            this.$refs.uNotify.show({
              type: 'error',
              message: '授权失败',
              duration: 1500
            })
            return false
          }
          let result = await this.$u.api.user.UserLogin({
            code
          })

          if (result.code === 1) {
            this.$refs.uNotify.show({
              type: 'success',
              message: result.msg,
              duration: 1500
            })
            uni.setStorageSync('LoginUser', result.data)
            // 当成功授权后直接返回来的数据给LoginUser
            this.LoginUser = result.data
            uni.switchTab({
              rul: '/pages/base/index'
            })
            return false
          } else {
            this.$refs.uNotify.show({
              type: 'error',
              message: result.msg,
              duration: 1500
            })
            if (result.url) {
              setTimeout(() => {
                this.$u.route({
                  url: '/pages/bind/bind',
                  type: 'navigateTo'
                })
              }, 1500);
            }
            return false
          }
        }
      })
    },
    profile() {
      this.$u.route({
        url: '/pages/profile/profile',
        type: 'navigateTo'
      })
    },
    address() {
      this.$u.route({
        url: '/pages/address/index',
        type: 'navigateTo'
      })
    },
    order() {
      this.$u.route({
        url: '/pages/order/index',
        type: 'navigateTo'
      })
    },
    record() {
      this.$u.route({
        url: '/pages/record/record',
        type: 'navigateTo'
      })
    },
    cancel() {
      this.show = false
      // console.log('close');
    },
    call() {
      this.show = false
      uni.makePhoneCall({
        phoneNumber: '18875909244' //仅为示例
      });
    }
  },
};
</script>

<style>
page {
  background-color: rgb(247, 247, 247);
}

.login {
  margin-top: 500rpx;
  background-color: #0173de;
  width: 400rpx;
  color: white;
  opacity: 0.7;
}

.button-hover {
  color: white;
  opacity: 1;
  background-color: #0173de;
}

.login {
  margin: 400rpx;
}

.userinfo {
  width: 100%;
  /* height: 400rpx; */
  padding: 40rpx 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
  color: white;
}

.userinfo-avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.nickname-carid,
.userinfo-carid {
  font-size: 36rpx;
  margin: 10rpx 0;
}

.userinfo-carid {
  padding-bottom: 5rpx;
  font-size: 26rpx;
}

.usermotto {
  width: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.profile-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: auto;
  width: auto;
  padding: 20rpx 50rpx;
  border-bottom: 20rpx solid rgb(234, 234, 234);
  font-size: 26rpx;
  box-shadow: 0 0 10px #ddd;
}

.profile-items image {
  height: 36rpx;
  width: 36rpx;
}

.auth {
  width: 300rpx;
  background-color: #4ea9f5;
  border-radius: 20rpx;
  margin-top: 20rpx;
  color: #fff;
}
</style>
